<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="../js/jquery.fullscreen.js"></script>
<script type="text/javascript">
$(document).ready(function() {

function fullscreenVideoResizing() {
	   // Cansvas height  (4:3)
	   var h = ($(window).width()/2 - 12) * 0.75;
	   $('.video-row').css('height', ($(window).height() - h)/2);
	   $('.video-main-container').css('height', h);
	   $('.video-size-button').css('right', $('.video-size-button').offset().top);
}

function videoFullActionsBinding() {
   $('.video-call-button').unbind('click');
   $('.video-call-button').bind('click', function() {
	   if($(this).attr('class').indexOf('active') == -1) {
		   $(this).addClass('active');
		   // Video mute flipping
		   if($(this).attr('class').indexOf('video-icon') > -1)
			   $('.video-full-canvas.current-user').addClass('video-off');
		   // Fullscreen mode
		   if($(this).attr('class').indexOf('size-icon') > -1)
			   $(document).fullScreen(true)
	   }
	   else {
	       $(this).removeClass('active');
		   // Video mute flipping
		   if($(this).attr('class').indexOf('video-icon') > -1)
			   $('.video-full-canvas.current-user').removeClass('video-off');
		   // Fullscreen mode
		   if($(this).attr('class').indexOf('size-icon') > -1)
			   $(document).fullScreen(false);
	   }
   });
}

$('.incoming-call-button.audio-call').unbind('click');
$('.incoming-call-button.audio-call').bind('click', function() {
	$('.fm-dialog-overlay').addClass('hidden');
	$('.incoming-call-dialog').addClass('hidden');
    $('.video-full-container').removeClass('hidden');
    $('.video-call-button.size-icon').addClass('active');
    $(document).fullScreen(true);
    fullscreenVideoResizing();
    $(window).bind('resize');
    $(window).bind('resize', function ()
    {
	  fullscreenVideoResizing();
    });
    videoFullActionsBinding();
});

});

</script>
</head>

<body id="bodyel" class="bottom-pages">

<div class="video-full-container hidden">
     <div class="video-row">
         <div class="video-full-demo-ticket"></div>
         <div class="video-full-logo"></div>
         <div class="video-size-button">
             <div class="video-call-button size-icon"></div>
         </div>
     </div>
     <div class="video-main-container">
           <!-- Please add "video-off" classname if user disabled camera !-->
           <div class="video-full-canvas">
             <div class="video-fliper">
               <!-- Please use canvas instead of demo img. width should be 100%, Width : Height = 4:3 !-->
               <div class="video-canvas-flip-side front">
                 <img src="images/temp/video-temp-img.jpg" />
               </div>
               <div class="video-full-disabled-block back">
                    <div class="video-full-disabled-icon"></div>
                    <div class="video-full-disabled-txt">Camera disabled</div>
               </div>
             </div>
           </div>
           <!-- Please add "video-off" classname if user disabled camera !-->
           <div class="video-full-canvas current-user">
             <div class="video-fliper">
               <!-- Please use canvas instead of demo img. width should be 100%, Width : Height = 4:3 !-->
               <div class="video-canvas-flip-side front">
                 <img src="images/temp/video-temp-img.jpg" />
               </div>
               <div class="video-full-disabled-block back">
                    <div class="video-full-disabled-icon"></div>
                    <div class="video-full-disabled-txt">Camera disabled</div>
               </div>
             </div>
           </div>
           <div class="clear"></div>
     </div>
     <div class="video-row">
              <div class="video-full-buttons">
                 <div class="video-call-button audio-icon"></div>
                 <div class="video-call-button video-icon"></div>
                 <div class="video-call-button hang-up-icon"></div>
              </div>
     </div>

  </div>

<div class="fm-dialog-overlay"></div>

<div class="fm-dialog incoming-call-dialog">
     <div class="fm-dialog-close"></div>
     <div class="incoming-call-header">
         Incoming call...
     </div>

     <div class="incoming-call-avatar">
         <div class="incoming-call-shadow-bl"></div>
         <img src="../images/mega/default-avatar.png" alt="" />
     </div>

     <!-- Please add "star" classname" !-->
     <div class="incoming-call-username star">
       <span class="incoming-contact-info">
         <span class="incoming-call-name">Guy Kloss</span>
         <span class="incoming-call-txt">Incoming call...</span>
       </span>
     </div>

     <!-- Please add "video-enabled" classname to activate video-call button !-->
     <div class="incoming-call-buttons">
        <div class="incoming-call-button cancel-call"></div>
        <div class="incoming-call-button video-call"></div>
        <div class="incoming-call-button audio-call"></div>

     </div>
</div>

</body>
</html>
